<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>代码生成</title>
    <link rel="stylesheet"  href="${domain}/css/layui.css" />
    <style>
        .select-div{
            float:left;
            margin: 0 25px 0 10px !important;
            width:120px;
        }
        .padding-lr{
            padding: 9px 3px !important;
        }
        .padding-t{
            padding-top:10px !important;
        }
        .input-search{
            display: inline-block;
            margin: 10px;
        }
        .form-search{
            float: left;
        }
        .generator-btn{
            margin:13px;
        }
        .search-con{
            display: inline-block;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<#include "top.ftl">
<#include "left.ftl">
    <div class="layui-body" >

        <div class="search-con " style="padding: 15px;">
            <div class="search-con ">
                <div class="input-search">
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="tableName" autocomplete="off" placeholder="输入表名查询">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
                <form class="layui-form form-search" action="">
                    <div class="layui-form-item padding-t layui-inline">
                        <label class="layui-form-label padding-lr">数据库</label>
                        <div class="layui-input-block select-div" id="select-div">
                            <select name="db" lay-filter="db-filter" id="dbSelect">
                            <#list dbs as db>
                                <option value="${db}" <#if connectDb==db>selected</#if>>${db}</option>
                            </#list>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div style="display: inline-block;float: right;">
                <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm generator-btn" data-type="generate">生成代码</button>
                <form class="layui-form form-search" action="">
                    <div class="layui-form-item padding-t layui-inline">
                        <label class="layui-form-label ">代码路径</label>
                        <div class="layui-input-block select-div">
                            <select name="db" lay-filter="path-filter" id="pathSelect">
                                <#list paths as path>
                                    <option value="${path.id}">${path.title}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <table class="layui-hide" id="table" lay-filter="table-filter"></table>
    </div>
        <#include "footer.ftl">
</div>
    <script src="${domain}/layui.js"></script>
    <script id="selectTpl" type="text/html">
        {{#  layui.each(d.data, function(index, item){ }}
           <option value="{{item.id}}">{{item.title}}</option>
        {{#  }); }}
    </script>
<script >
    layui.use(['table','form'], function(){
        var table = layui.table,
                form=layui.form,
                 $ = layui.$;
        layui.use('table', function() {
            table.render({
                elem: '#table'
                , url: '/table/list'
                , cols: [[
                    {type: 'checkbox'},
                      {field: 'tableName', width: 200, title: '表名'},
                      {field: 'tableSchema', width: 80, title: '数据库'},
                      {field: 'tableType', width: 120, title: '表类型'},
                      {field: 'engine', width: 100, title: '引擎'},
                      {field: 'tableCollation', width: 130, title: '编码'},
                      {field: 'updateTime', width: 180, title: '更新时间'},
                      {field: 'createTime', width: 180, title: '创建时间'},
                      {field: 'tableComment', minWidth: 120, title: '备注'}
                ]]
                ,page: true
            });
        });
        //监听表格复选框选择
        table.on('checkbox(table-filter)', function(obj){
            console.log(obj)
        });

        form.on('select(db-filter)',function (data) {
            $('#tableName').val("");
            //执行重载
            table.reload('table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    dbName:data.value
                }
            });
            $.ajax({
                url:'/path/list',
                type:"GET",
                data:{
                    dbName:$('#dbSelect option:selected').val()
                },
                success:function(data){
                    if(data.code===0){
                        var content='';
                        layui.use('laytpl', function() {
                            content =  layui.laytpl(selectTpl.innerHTML).render(data);
                        });
                        $("#pathSelect").html(content);
                        form.render('select');
                    }
                }
            });


        });

        var $ = layui.$, active = {
            generate: function(){ //获取选中数据
                var checkStatus = table.checkStatus('table')
                        ,data = checkStatus.data,
                        pathSel = $('#pathSelect option:selected');
                if(pathSel.val()===undefined){
                    layer.confirm('请配置路径方案', {
                        btn: ['跳转配置','稍后'] //按钮
                    }, function(){
                        location.href ="/path/toEdit?dbName="+$('#dbSelect option:selected').val();
                    });
                    return;
                }
                if(data.length<=0){
                        layer.alert('请选择表', {
                            skin: 'layui-layer-lan'
                            ,closeBtn: 0
                            ,anim: 1 //动画类型
                        });
                        return;
                }
                location.href = "/table/generate?db="+$('#dbSelect option:selected').val()+"&tableName=" + data.map(v=>v.tableName)+"&pathId="+pathSel.val();
            },
            reload: function(){
                var tableName = $('#tableName');

                //执行重载
                table.reload('table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        tableName:tableName.val()
                    }
                });
            }
        };

        $('.search-con  .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    layui.use('element', function(){
        var element = layui.element;
    });
</script>
</body>
</html>
